<template>
	<div class="img-history">
		<div class="grid-item" v-for="(record, index) in recognitionRecord" :key="index">
			<el-card>
				<div class="title">{{record.result_type}}
					<span class="time">{{ formatTime(record.time) }}</span>
					<el-icon color="#F56C6C" size="20" class="del-btn" @click="del(record.id)"><CircleCloseFilled /></el-icon>
				</div>
				<el-image v-if="record.upload_image"
						  class="record-image"
						  :src="'api/'+record.upload_image"
						  fit="cover"
						  :initial-index="index"
						  :preview-src-list="recognitionRecord.map(item =>  'api/' + item.upload_image)"/>
			</el-card>
		</div>
	</div>
</template>
<script setup lang="ts">
import {ref, onMounted} from "vue";
import {getImageRecognitionList, deleteImageRecognition, deleteImageRecognitionHistory} from "/@api/image_recognition/hz-system-image-recognition-api";
import dayjs from 'dayjs'
import {CircleCloseFilled} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";
const formatTime = time => {
	return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

const pageConfig = ref({
	page: 1,
	pageSize: 12,
	total: 0,
});
const recognitionRecord = ref([])
const total = ref()
const loadYoLoRecognitionRecord = async () => {
	const response = await getImageRecognitionList({
		page: pageConfig.value.page,
		pageSize: pageConfig.value.pageSize,
	});
	recognitionRecord.value = response.data.record;
	total.value = response.data.total
};

const del = async (id)=> {
	await ElMessageBox.confirm(
		'确认删除该记录?',
		'Warning',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	await deleteImageRecognitionHistory(id)
	await loadYoLoRecognitionRecord()
}
onMounted(loadYoLoRecognitionRecord)
</script>
<style scoped lang="scss">

.img-history {
	column-count: 4;       /* 列数 */
	column-gap: 10px;     /* 列间距 */
	padding: 14px;
}

.grid-item {
	display: inline-block;  /* 必须设置为inline-block */
	width: 100%;           /* 占满列宽 */
	margin-bottom: 10px;   /* 行间距 */
	break-inside: avoid;   /* 防止内容被分割到不同列 */
	page-break-inside: avoid; /* 旧版浏览器支持 */
	.record-image {
		width: 100%;
		height: auto;
		margin-top: 10px;
	}
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40px;
		border-bottom: 1px solid #CDD0D6;
		font-weight: bold;
		position: relative;
		.time{
			color: #999;
			font-size: 14px;
			font-weight: 400;

		}
		.del-btn{
			position: absolute;
			top: -10px;
			right: -10px;
			cursor:pointer;
		}
	}
}
</style>
